<template>
  <div id="ruleConfiguration">
    <el-card>
      <!-- 搜索框 -->
      <div
        class="configSearch"
        style="font-size: 14px; color: #606266; font-weight: 800"
      >
        <span class="configName"
          ><el-input
            v-model="configPam.name"
            placeholder="请输入规则名称"
            size="small"
            style="width: 180px"
            clearable
          ></el-input
        ></span>
        &ensp; &ensp; &ensp;
        <el-button size="small" type="primary" @click="getConfigData()"
          >搜索</el-button
        >
        <el-button size="small" type="primary" @click="addConClick('添加')"
          >添加拦截规则</el-button
        >
        <!-- 添加、修改弹框 -->
        <el-dialog
          :title="addUpdataCondText + '拦截规则'"
          :visible.sync="addDialog"
          width="50%"
          :before-close="handleClose"
          :close-on-click-modal="false"
          center
        >
          <div class="addUpdataCond">
            <span>名称：</span>
            <el-input
              v-model="addUpdataCond.mark"
              placeholder="请输入拦截规则名称"
              size="small"
              style="width: 50%"
              clearable
            ></el-input>
          </div>
          <div class="addUpdataCond">
            <span>名称：</span>
            <el-input
              v-model="addUpdataCond.ip"
              placeholder="请输入ip"
              size="small"
              style="width: 50%"
              clearable
            ></el-input>
          </div>
          <div class="addUpdataCond">
            <span>禁发地区：</span>
            <el-input
              v-model="addUpdataCond.area"
              placeholder='请输入禁发地区，多个地区 "," 隔开'
              size="small"
              style="width: 50%"
              clearable
            ></el-input>
          </div>
          <div class="addUpdataCond">
            <span>运营商：</span>
            <el-select v-model="addUpdataCond.operator" placeholder="请选择">
              <el-option label="联通" value="01"> </el-option>
              <el-option label="移动" value="02"> </el-option>
              <el-option label="电信" value="03"> </el-option>
            </el-select>
          </div>
          <div class="addUpdataCond">
            <span>是否启用：</span>
            <el-select v-model="addUpdataCond.type" placeholder="请选择">
              <el-option label="启用" value="0"> </el-option>
              <el-option label="未启用" value="1"> </el-option>
            </el-select>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addDialog = false">取 消</el-button>
            <el-button type="primary" @click="defAddCond()">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <div class="whiteTab" style="margin-top: 20px">
        <!-- 规则表格数据 -->
        <el-table :data="configData.list" stripe border style="width: 100%">
          <el-table-column prop="mark" label="规则名称" align="center">
          </el-table-column>
          <el-table-column prop="ip" label="IP地址" align="center">
          </el-table-column>
          <el-table-column label="类型" align="center">
            <template slot-scope="scope">
              <div
                v-if="scope.row.type == 0"
                style="
                  display: inline-block;
                  border: 1px #67c23a solid;
                  width: 35px;
                  height: 20px;
                  line-height: 20px;
                  text-align: center;
                  color: #2dd377;
                  background-color: rgba(231, 250, 240, 0.8);
                  font-size: 10px;
                  border-radius: 3px;
                "
              >
                启用
              </div>
              <div
                v-else
                style="
                  display: inline-block;
                  border: 1px #ffdddd solid;
                  width: 35px;
                  height: 20px;
                  line-height: 20px;
                  text-align: center;
                  color: #ff4949;
                  background-color: rgba(255, 237, 237, 0.8);
                  font-size: 10px;
                  border-radius: 3px;
                "
              >
                未启用
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="area" label="禁发地区" align="center">
          </el-table-column>
          <el-table-column label="禁发运营商" align="center">
            <template slot-scope="scope">
              <span v-if="(scope.row.operator = '01')">联通</span>
              <span v-else-if="(scope.row.operator = '02')">移动</span>
              <span v-else>电信</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" width="300">
            <template slot-scope="scope">
              <span>{{ timestampToTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="添加人" align="center">
          </el-table-column>

          <el-table-column label="操作" align="center" width="240">
            <template slot-scope="scope">
              <el-button
                slot="reference"
                type="primary"
                size="small"
                icon="el-icon-edit"
                @click="editConfig('修改', scope.row)"
                >修改</el-button
              >
              &emsp; &emsp; &emsp;
              <el-popconfirm
                title="你确认要删除吗？"
                @onConfirm="remConfigData(scope.row)"
              >
                <el-button
                  slot="reference"
                  type="danger"
                  size="small"
                  icon="el-icon-delete"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="pagination" style="margin-top: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.configData.pageNum ? this.configData.pageNum : 0"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="this.configData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.configData.total ? this.configData.total : 0"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getConfig, addConfig, removeConfig, updateConfig } from "@/api/log";
// 引入防抖函数
import debounce from "lodash.debounce";
export default {
  data() {
    return {
      // 搜索条件
      configPam: {
        pageSize: 10,
        pageNum: 1,
        name: "",
      },
      //   表格数据
      configData: {},
      addDialog: false,
      //   添加、修改拦截规则
      addUpdataCondText: "",
      addUpdataCond: {
        area: "",
        createTime: "",
        frequency: "1",
        id: "",
        ip: "",
        mark: "",
        operator: "01",
        params: "{}",
        type: "1",
        username: "",
      },
      //   修改当前数据
      editRowData: {},
    };
  },
  created() {
    // 获取当前登录用户名
    this.addUpdataCond.username = window.localStorage.getItem("username");
    this.getConfigData();
  },
  methods: {
    // 获取规则配置数据
    getConfigData: debounce(async function () {
      let res = await getConfig(this.configPam);
      if (res.code == 200) {
        this.$message({
          message: "查询成功",
          type: "success",
        });
        this.configData = res.data;
      }
      console.log(this.configData);
    }, 500),
    // 添加拦截规则弹框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    addConClick(text) {
      this.addUpdataCondText = text;
      this.addUpdataCond = {
        area: "",
        createTime: "",
        frequency: "1",
        id: "",
        ip: "",
        mark: "",
        operator: "01",
        params: "{}",
        type: "1",
        username: "",
      };
      this.addDialog = true;
    },
    async defAddCond() {
      let res = {};
      if (this.addUpdataCondText == "添加") {
        res = await addConfig(this.addUpdataCond);
      } else {
        res = await updateConfig(this.addUpdataCond);
      }
      if (res.code == 200) {
        this.$message({
          message: res.msg,
          type: "success",
        });
        this.addDialog = false;
        this.getConfigData();
      }
    },
    // 修改拦截规则
    editConfig(text, row) {
      this.addUpdataCondText = text;
      this.addUpdataCond = row;
      this.addDialog = true;
    },
    // 删除拦截规则
    async remConfigData(row) {
      let res = await removeConfig(row);
      if (res.code == 200) {
        this.$message.error(res.msg);
        this.getConfigData();
      }
    },
    //表格分页
    async handleSizeChange(val) {
      this.configPam.pageSize = val;
      this.configPam.pageNum = 1;
      this.getConfigData();
    },
    async handleCurrentChange(val) {
      this.configPam.pageNum = val;
      this.getConfigData();
    },
    // 时间戳转换为时间
    timestampToTime(timestamp) {
      const date = new Date(timestamp);
      const Y = date.getFullYear() + "年";
      const M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "月";
      const D = date.getDate() + "日";
      const h = date.getHours() + "时";
      const m = date.getMinutes() + "分";
      const s = date.getSeconds() + "秒";
      return Y + M + D + h + m + s;
    },
  },
};
</script>

<style lang="scss" scoped>
#ruleConfiguration {
  .addUpdataCond {
    margin-bottom: 10px;
    span {
      display: inline-block;
      width: 150px;
      text-align: right;
    }
  }
}
</style>
